<template>
  <!-- 预热展品信息 -->
  <div class="preheatExhibitsInformation">
    <div class="remarks">带   <span style="color:red;">*</span>为必填内容</div>
    <el-form class="fromData">
      <div style="display:flex;">
        <div class="exhibits_name exhibitsBox">
          <div class="title">
              <span style="color:red;">*</span>
            <span>展品名称</span>
          </div>
          <input type="text" v-model="name1" name id />
        </div>
        <div class="exhibits_model exhibitsBox" style="margin-left:2rem">
          <div class="title">
              <span style="color:red;">*</span>
            <span>展品型号</span>
          </div>
          <input type="text" v-model="name2"  name id />
        </div>
      </div>

      <div class="key_word exhibitsBox">
        <div class="title">
          <div class="title1">
             <span style="color:red;">*</span>
            <span>关键词</span>
          </div>
          <div class="title2">（用逗号隔开）</div>
        </div>
        <input type="text" v-model="name3"  name id />
      </div>
      <div class="category exhibitsBox">
        <div class="title">
          <div class="title1">
              <span style="color:red;">*</span>
            <span>所属品类</span>
          </div>
          <div class="title2">（可同属两个品类）</div>
        </div>
        <div class="checks">
          <div class="checkList">
            <div class="title">第一级</div>
            <div class="check_box">
              <el-select @change="detail" @blur="add" value-key="id"  v-model="value1" placeholder="请选择">
                <el-option

                  v-for="item in options1"
                  :key="item.id"
                  :label="item.generaName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="checkList">
            <div class="title">第二级</div>
            <div class="check_box">
              <el-select v-model="value2" placeholder="请选择">
                <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.subclassName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
          </div>
          
        </div>
      </div>
      <div class="main_picture_of_exhibits exhibitsBox">
        <div class="title">
          <div class="title1">
              <span style="color:red;">*</span>
            <span>展品主图</span>
          </div>
          <div class="title2">（可同属多品类）</div>
        </div>
        <div class="upload">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"

          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt />
          </el-dialog>
        </div>
      </div>
      <div class="add_otherImg exhibitsBox">
        <div class="title">添加其他图片</div>
        <div class="upload">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img :src="dialogImageUrl" alt />
          </el-dialog>
        </div>
      </div>
      <div class="product_parameters exhibitsBox">
        <div class="title">产品参数</div>
        <div class="itemBox">
          <div class="daojia box">
            <div class="left">
              <div class="leftTitle">刀架上最大回转直径</div>
              <input type="text" name id />
            </div>
            <div class="right">
              <div class="rightTitle">床身上最大回转直径</div>
              <input type="text" name id />
            </div>
          </div>
          <div class="required_parameters box">
            <div class="left">
              <div class="leftTitle">必填参数4</div>
              <input type="text" name id />
            </div>
            <div class="right">
              <div class="rightTitle">必填参数4</div>
              <input type="text" name id />
            </div>
          </div>
          <div class="other_parameters box">
            <div class="other_title">其他参数</div>
            <el-input
              type="textarea"
              show-word-limit
              :rows="5"
              placeholder="请输入内容"
              v-model="text"
            ></el-input>
          </div>
        </div>
      </div>
      <div class="highlights exhibitsBox">
        <div class="title">产品亮点/特点</div>
        <el-input type="textarea" show-word-limit :rows="6" placeholder="请输入内容" v-model="textarea"></el-input>
      </div>
      <div class="btns">
        <button>保存</button>
        <button @click="click">提交</button>
        <button>预览</button>
      </div>
    </el-form>
  </div>
</template>
<script>
import {search,Allgenera,add } from "../../../request/exhibition"
export default {
  name: "",
  components: {},
  data() {
    return {
      value1: "",
      value2: "",
      value3: "",
      value4: "",
      id:1,
      text:"",
      options1: [
        // {
        //   value: "选项1",
        //   label: "1车床（含数控）"
        // },
        // {
        //   value: "选项2",
        //   label: "2铣床（含数控）"
        // },
        // {
        //   value: "选项3",
        //   label: "3镗床（含数控）"
        // }
      ],
      options2: [
        // {
        //   value: "选项1",
        //   label: "1卧式车床"
        // },
        // {
        //   value: "选项2",
        //   label: "2立式车床"
        // },
        // {
        //   value: "选项3",
        //   label: "3高精车床"
        // }
      ],
      options3: [
        {
          value: "选项1",
          label: "1车床（含数控）"
        },
        {
          value: "选项2",
          label: "2铣床（含数控）"
        },
        {
          value: "选项3",
          label: "3镗床（含数控）"
        }
      ],
      options4: [
        {
          value: "选项1",
          label: "1重型机床"
        },
        {
          value: "选项2",
          label: "2"
        },
        {
          value: "选项3",
          label: "3"
        }
      ],
      dialogImageUrl: "",
      dialogVisible: false,
      textarea: "",
      name1:"",
      name2:"",
      name3:"",
      textare:""
    };
  },
  created() {},
  mounted(){
    this.save()
    this.room()
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    detail(event){
      this.id=event
      search({id:event}).then(res=>{
        console.log(res)
        this.options2=res.data.data
      
        
      })
      console.log(this.id)
    },
    click(){
      var list={
          productName:this.name1,
          machineModel:this.name2,
          productkeyword:this.name3,
          subclassId:this.id,
          productContent:this.textarea
      }
      add(list).then(res=>{

      })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    save(){
      search({id:1}).then(res=>{
        console.log(res)
        this.options2=res.data.data
      
        
      })
    },
    room(){
        Allgenera().then(res=>{
          console.log(res)
          this.options1=res.data.data
        
        })
    }
  }
};
</script>
<style lang='less' scoped>
.preheatExhibitsInformation {
  font-size: 0.16rem;
  width: 16.4rem;
  padding-top: 0.4rem;
  padding-left: 0.6rem;
  padding-bottom: 0.6rem;
  .remarks {
  }
  .fromData {
    font-size: 0.18rem;
    .exhibitsBox {
      display: flex;
      margin-top: 0.45rem;
      .title {
        width: 1.2rem;
        span {
          color: #004cb3;
        }
        .title2 {
          color: #333333;
          font-size: 0.14rem;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      input {
        outline: none;
      }
    }
    .exhibits_name,
    .exhibits_model {
      input {
        width: 4rem;
        height: 0.4rem;
        border: 1px solid rgba(204, 204, 204, 1);
      }
      .title {
        line-height: 0.4rem;
      }
    }
    .key_word {
      input {
        width: 6rem;
        height: 0.4rem;
        border: 0.01rem solid rgba(204, 204, 204, 1);
      }
    }
    .category {
      .checks {
        // display: flex;
        width: 10rem;
        // border: 1px solid red;
        flex-wrap: wrap;
        justify-content: space-between;
        .checkList {
          display: inline-block;
          // display: flex;
          margin-right: 0.95rem;
          margin-bottom: 0.3rem;
          .title {
            display: inline-block;
            width: 0.6rem;
            margin-right: 0.3rem;
            line-height: 0.4rem;
            color: #333333;
          }
          .check_box {
            display: inline-block;
            width: 2.8rem;
            // border: 1px solid red;
          }
        }
        .checkList:nth-child(2n) {
          margin-right: 0;
        }
        /deep/ .el-button--primary {
          color: #666666;
          background-color: #fff;
          border-color: #ccc;
        }
      }
    }
    .main_picture_of_exhibits {
      /deep/ .el-upload--picture-card {
        width: 3.2rem;
        height: 2.4rem;
        line-height: 2.4rem;
        border: 1px solid #c0ccda;
      }
      /deep/ .el-upload-list--picture-card .el-upload-list__item {
        height: 2.4rem;
      }
      /deep/ .el-upload-list--picture-card .el-upload-list__item-thumbnail {
        width: 100%;
        height: 2.4rem;
      }
    }
    .add_otherImg {
      .title {
        color: #004cb3;
      }
      /deep/ .el-upload--picture-card {
        width: 3.2rem;
        height: 2.4rem;
        line-height: 2.4rem;
        border: 1px solid #c0ccda;
      }
      /deep/ .el-upload-list--picture-card .el-upload-list__item {
        height: 2.4rem;
      }
      /deep/ .el-upload-list--picture-card .el-upload-list__item-thumbnail {
        width: 100%;
        height: 2.4rem;
      }
    }
    .product_parameters {
      .title {
        color: #004cb3;
      }
      .itemBox {
        margin-top: 0.3rem;
        .box {
          display: flex;
          font-size: 0.16rem;
          line-height: 0.4rem;
          margin-bottom: 0.5rem;
          .left {
            display: flex;
            .leftTitle {
              width: 1.65rem;
            }
          }
          .right {
            display: flex;
            margin-left: 1.7rem;
            .rightTitle {
              width: 1.65rem;
            }
          }
          input {
            margin-left: 0.1rem;
            width: 2rem;
            height: 0.4rem;
            border: 0.01rem solid rgba(204, 204, 204, 1);
            outline: none;
          }
        }
        .other_parameters {
          .other_title {
            width: 1.65rem;
            margin-right: 0.1rem;
          }
          .el-textarea {
            width: 5rem;
            outline: none;
          }
        }
      }
    }
    .highlights {
      .title {
        color: #004cb3;
        width: 2.75rem;
        margin-right: 0.2rem;
      }
      .el-textarea {
        width: 7rem;
        outline: none;
      }
    }
    .btns {
      margin-top: 0.75rem;
      button {
        width: 0.8rem;
        height: 0.4rem;
        border-radius: 0.05rem;
        border: none;
        outline: none;
        color: #fff;
        font-weight: bold;
        font-size: 0.16rem;
      }
      button:nth-child(1) {
        margin-left: 5rem;
        background-color: #e29000;
      }
      button:nth-child(2) {
        background-color: #e20000;
        margin: 0 0.7rem;
      }
      button:nth-child(3) {
        background-color: #004cb3;
      }
    }
  }
}
</style>